<template>
  <view class="schedule-container">
    <view class="header-bg"></view>
    <!-- 头部说明 -->
    <view class="header">
      <view class="notice-wrap">
        <view class="left">
          <image :src="baseHttp + '/image/getByImageId?imageId=' + room.images"/>
        </view>
        <view class="right">
          <view class="title-wrap">
            <view class="title">{{ room.roomName }}</view>
            <view class="status" v-if="roomState == 1">空闲中</view>
            <view class="status" v-if="roomState == 5">使用中</view>
            <view class="status" v-if="roomState == 6">保洁中</view>
          </view>
          <view class="notice-desc-wrap">
            <view class="title">预定须知：</view>
            <view class="use-desc">使用教程 ></view>
          </view>
          <view class="detail-desc">
            预定成功后，请按预约时间及时确认到店消费，若无法到店消费，可自主取消订单；预约时间到期前，可以自主续单延时，请提前规划好预约时段。
          </view>
        </view>
      </view>
    </view>


    <!-- 预定类别内容选择 -->
    <view class="body">
      <view class="schedule-mode-wrap">
        <view class="category">
          <view
              :class="['item', curIndex === index ? 'actived' : '']"
              v-for="(item, index) in category"
              :key="item.type"
              @click="onSelectMode(index)"
          >
            {{ item.text }}
          </view>
        </view>
        <view class="category-detail">
          <view class="select-warp">
            <view class="date-picker">
              <view
                  :class="['date-item', curDateIndex === index ? 'actived' : '']"
                  v-for="(item, index) in selectOptions.defaultDayList"
                  :key="index"
                  @click="selectDay(item, index)"
              >
                <view class="date">{{ item.day }}</view>
                <view class="week">{{ item.week }}</view>
              </view>
            </view>
            <view class="hour-picker">
              <view class="label">时长选择:</view>
              <view class="hour-wrap">
                <view
                    :class="[
                    'hour-item',
                    curHourIndex === index ? 'actived' : '',
                  ]"
                    v-for="(item, index) in hourList"
                    :key="index"
                    @click="quickSelectHour(item.hour, index)"
                >
                  {{ item.text }}
                </view>
              </view>
            </view>
            <view class="time-picker">
              <view class="label">时间选择:</view>
              <view class="time-wrap" @click="showDetail = true">
                <view class="time-item">{{ confirmInfo.defaultHourStart }}</view>
                <view style="flex: 1; text-align: center">到</view>
                <view class="time-item">{{ confirmInfo.defaultHourEnd }}</view>
              </view>
            </view>
          </view>
          <view class="confirm-tip">
            预定成功后，请按预约时间及时确认到店消费，若无法到店消费，可自主取消订单；预约时间到期前，可以自主续单延时，请提前规划好预约时段。
          </view>
        </view>
      </view>

      <view class="spare-time-wrap" style="display: none">
        <view class="spare-time">
          <view class="top">
            <view
                class="block-item"
                v-for="(item, index) in spareTimeDesc"
                :key="index"
            >
              <view class="block" :style="{ background: item.color }"></view>
              <view>{{ item.text }}</view>
            </view>
          </view>
          <view class="middle">
            <view
                class="spare-time-map"
                v-for="item in spareTimeStatus"
                :key="item.date"
            >
              <view class="date">{{ item.date }}</view>
              <view class="map-wrap">
                <view class="map" v-for="items in 24" :key="items">
                  <view
                      :class="[
                      'block',
                      item.curSelectTime.includes(items) ? 'aaaa' : '',
                    ]"
                      :style="{
                      background: item.curSelectTime.includes(items)
                        ? item.curColor
                        : '' || item.selectableTime.includes(items)
                        ? item.selectColor
                        : '' || item.disableTime.includes(items)
                        ? item.disableColor
                        : '',
                    }"
                  ></view>
                  <view class="number">{{ items }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="order-detail-wrap">
        <view class="spare-time">
          <view class="title-wrap">
            <view class="title">订单总价</view>
            <view class="total-price">¥{{confirmInfo.totalPrice}}</view>
          </view>
          <view class="order-info-field">
            <view class="title">预约时长</view>
            <view class="info">{{confirmInfo.hour}}小时</view>
          </view>
          <view class="order-info-field">
            <view class="title">团购券/优惠券</view>
            <view v-if="!selectedCoupon" class="value" style="color: orange" @click="handleShowCoupon">{{couponList.length}}张可用></view>
            <view v-if="selectedCoupon" class="value" style="color: orange" @click="handleShowCoupon">{{selectedCoupon.voucherName}}</view>
          </view>
          <view class="order-info-field">
            <view class="title">优惠金额</view>
            <view class="info">{{confirmInfo.discountAmount}}元</view>
          </view>
          <view class="order-info-field">
            <view class="title">开始时间</view>
            <view class="info">{{confirmInfo.defaultHourStart}}</view>
          </view>
          <view class="order-info-field">
            <view class="title">结束时间</view>
            <view class="info">{{confirmInfo.defaultHourEnd}}</view>
          </view>
          <view class="order-info-field">
            <view class="title">团购核销</view>
            <view class="value">
              <view class="coupon-input" style="display: flex;color: #1D2C6D" @click="goPage('/pages/tea/voucher/index?tabIndex=2')">
                去核销>
              </view>
            </view>
          </view>
          <view class="order-info-field" v-if="couponInfo.title">
            <view class="title">美团券</view>
            <view class="info">{{couponInfo.title}}</view>
          </view>
        </view>
      </view>

      <view class="footer">
        <view class="buttons">
          <view class="price-info">
            <view class="price" style="color: orange;font-weight: bold">{{confirmInfo.totalPrice - confirmInfo.discountAmount}}元</view>
            <view class="total-hours">共{{confirmInfo.hour}}小时</view>
          </view>
          <view class="button" @click="scenePay">确认预约</view>
        </view>
        <view class="background-fix" v-if="showDetail" @click="showDetail=false"></view>
        <view class="appointment-select" v-if="showDetail">
          <view class="notice-tip"><image class="notice-image" src="../../../static/notice.png" />2小时起订，灰色为已被预订</view>
          <view class="date-select">
            <view class="date-select-item" @click="selectDay(defaultItem, index)" :class="{current:defaultItem.selected?true:false}" v-for="(defaultItem, index) in selectOptions.defaultDayList" :key="index">
              <view class="month">{{defaultItem.day}}</view>
              <view class="week">{{defaultItem.week}}</view>
            </view>
            <view class="date-select-item" @click="selectCustomDay">
              <view class="month">
                <image src="../../../static/cal.png" class="cal-image"></image>
              </view>
              <view class="week">其它日期</view>
            </view>
          </view>
          <view class="hours">
            <view v-for="(defaultHour,index) in selectOptions.defaultHourList" v-if="!defaultHour.pass">
              <view v-if="!defaultHour.disabled" @click="selectHour(defaultHour)" class="hour" :class="{current:defaultHour.selected?true:false}">
                <view style="margin-top: -6rpx">{{getPrice(defaultHour.hour)}}元</view>
                <view style="font-size: 24rpx;margin-top: 6rpx">{{defaultHour.hour + "-" + selectOptions.defaultHourList[index + 1].hour}}</view>
              </view>
              <view v-if="defaultHour.disabled" class="hour" :class="{current:defaultHour.selected?true:false}" style="background: lightgrey;">
                <view style="margin-top: -6rpx">{{getPrice(defaultHour.hour)}}元</view>
                <view style="font-size: 24rpx;margin-top: 6rpx">{{defaultHour.hour + "-" + selectOptions.defaultHourList[index + 1].hour}}</view>
              </view>
            </view>
          </view>
          <view class="select-buttons">
            <view class="close-button" @click="showDetail=false">取消</view>
            <view class="confirm-button" @click="confirmSelect">确定({{orderHour}}小时)</view>
          </view>
        </view>

        <w-picker
            :visible.sync="visible"
            mode="date"
            startYear="2021"
            endYear="2029"
            value="selectOptions.startDate"
            :current="true"
            fields="day"
            @confirm="onDateConfirm($event,'date')"
            @cancel="onCancel"
            :disabled-after="false"
            ref="date"
        ></w-picker>

        <modal :show="sceneConfirmDialog.show"  @close="onSceneClose" @cancel="onSceneClose" @confirm="scenePay" :show-cancel="true" confirm-text="确定" cancel-text="关闭">
          <view class="form-items scene-confirm-form">
            <!--
            <view class="form-item">
              <view class="form-title">当前时间:</view>
              <view class="form-value">2022-05-06 21:27</view>
            </view>
            -->
            <view class="form-item">
              <view class="form-title">预约:</view>
              <view class="form-value">
                <picker @change="onScenePickerChange" :value="sceneConfirmDialog.hourIndex" :range="sceneConfirmDialog.hourArr">
                  <view class="uni-input">{{sceneConfirmDialog.hourArr[sceneConfirmDialog.hourIndex]}}小时 <text style="color:#1D2C6D;margin-left:20upx;">请选择</text></view>
                </picker>
              </view>
            </view>
            <view class="form-item">
              <view class="form-title">费用:</view>
              <view class="form-value">
                {{sceneConfirmDialog.hour*roomConfig.price/100}}元
              </view>
            </view>
            <view class="form-item" v-if="couponInfo.title">
              <view class="form-title">优惠券:</view>
              <view class="form-value">
                {{couponInfo.title}}
              </view>
            </view>
          </view>
        </modal>

        <view class="coupon">
          <view :class="{'coupon-box': couponState}" @click="handleHiddenCoupon">
          </view>
          <view class="coupon-item" :class="{'coupon-show': couponState}">
            <view class="coupon-to">
              <text>选择优惠券</text>
            </view>
            <view class="content">
              <view v-if="couponList.length > 0" class="block" v-for="(item, index) in couponList" :key="index" @click="selectCoupon(item)">
                <image src="../../../static/coupon_icon.png" mode="aspectFill" class="coupon-icon"></image>
                <view class="coupon-desc">
                  <view class="coupon-name">{{item.voucherName}}</view>
                  <view style="display: flex" v-if="item.times && item.usedTimes">
                    <view class="coupon-times">剩余{{item.times}}次</view>
                    <view class="coupon-used">已用{{item.usedTimes}}次</view>
                  </view>
                  <view class="coupon-validity">{{filterTime(item.validityTimeStart) + '至' + filterTime(item.validityTimeEnd)}}</view>
                </view>
              </view>
              <view v-if="couponList.length == 0" style="text-align: center;padding: 10px;width: 100%;color: lightgray;font-size: 14px;">
                暂无可用优惠券
              </view>
            </view>
            <view class="cancel" @click.stop="handleHiddenCoupon">
              <text>取消</text>
            </view>
          </view>
        </view>
      </view>

    </view>



  </view>
</template>

<script>
import util from '@/libs/util.js'
import globalConfig from '../../../config'
const baseHttp = globalConfig.API_HOST
//import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
import wPicker from "@/components/w-picker/w-picker.vue";
import Modal from '@/components/neil-modal/neil-modal.vue';
import MyTabs from '@/components/my-tabs.vue'
export default {
  data() {
    return {
      mtCode: '',
      roomState: 0,
      /*tab: {
        curIndex: 0,
        items: [
          {value:0,label:'小时模式'},
          {value:1,label:'套餐模式'},
        ]
      },*/
      // 模式选择
      category: [
        {
          text: "小时模式",
          type: "hour",
        },
        {
          text: "套餐模式",
          type: "combo",
        },
      ],
      curIndex:0,
      // 当前日期索引,默认今天
      curDateIndex: 0,
      // 当前时长索引,默认4小时
      curHourIndex: 0,
      hourList: [
        {
          text: "2小时",
          hour: 2,
        },
        {
          text: "3小时",
          hour: 3,
        },
        {
          text: "4小时",
          hour: 4,
        },
        {
          text: "5小时",
          hour: 5,
        },
        {
          text: "6小时",
          hour: 6,
        },
        /*{
          text: "7小时",
          hour: 7,
        },
        {
          text: "8小时",
          hour: 8,
        }*/
      ],
      // 当前选择的时长
      hour: 0,
      // 时段说明
      spareTimeDesc: [
        {
          text: "当前选择时段",
          color: "#1D2C6D",
        },
        {
          text: "可选时段",
          color: "#fff",
        },
        {
          text: "不可选时段",
          color: "#ffeb3b",
        },
      ],
      // 当前时间列表
      curTime: "00:00",
      fetureTime: "00:00",
      // 时段状态
      spareTimeStatus: [
        {
          date: "2023-04-21",
          curSelectTime: [0, 1, 2, 3, 4, 5, 6, 7, 8],
          selectableTime: [9, 16],
          disableTime: [18, 19, 20, 21, 22, 23],
          curColor: "#1D2C6D",
          selectColor: "#fff",
          disableColor: "#ffeb3b",
        },
        {
          date: "2023-04-22",
          curSelectTime: [17, 18, 19, 20],
          selectableTime: [21, 22, 23],
          disableTime: [
            0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
          ],
          curColor: "#1D2C6D",
          selectColor: "#fff",
          disableColor: "#ffeb3b",
        },
      ],
      couponState: false,
      selectedCoupon:null,
      couponList: [],
      sceneConfirmDialog: {
        show: false,
        hour: 2,
        hourIndex: 0,
        hourArr: [2,3,4,5,6,7,8,9,10,11,12],
        totalPrice: 0.00
      },
      orderConfirmDailog: {
        show: false
      },
      showDetail: false,
      showPicker: false,
      date: '2019/01/01',
      time: '15:00:12',
      value: '',
      currentDay: '',
      maxHour: 0,
      confirmInfo: {
        startYear: '',
        startDate: '',
        defaultHourStart: '',
        defaultHourEnd: '',
        hour: 0,
        discountAmount: 0,
        totalPrice:0
      },
      dayTimeJson: {},
      bookedTimeJson: [],
      selectOptions: {
        startDate: "",
        defaultDayList:[],
        defaultHourStart: '',
        defaultHourEnd: '',
        defaultHourList: []
      },
      baseHttp: baseHttp,
      teaHouseId: '',
      roomId: '',
      showCount: 0,
      orderHour: 0,
      map: {

      },
      user: {
        level: 0
      },
      isUseCoupon: false,
      couponInfo: {
        code:"",
        price:0,
        time:0,
        title:"",
        type:""
      },
      groupVoucherInfo: {},
      room: {
        roomId: "",	//包厢id
        teamhouseId: "",	//茶室id
        roomType: "",	//包厢类型（预留）
        roomLevel: "",	//包厢等级（预留）
        roomState: "",	//包厢状态
        roomNO: "",	//包厢编号
        roomName: "",	//包厢名称
        images: "",	//包厢图片
        updateTime: "",	//更新时间
        remark: "",	//备注
        orderUserId: "",	//预约用户ID
        orderTime: ""	//预约时间
      },
      groupVoucherNo:"",
      timeIntervalDiscountJSON: {},
      roomConfig: {
        roomId: "",	//包厢id
        price: "",	//包厢租用单价（分）每小时
        vipPrice: "",	//会员包厢租用单价（分）每小时
        lockerPrice: "",	//储物柜租用单价（分）每小时
        freeOrderTime: "",	//免费预约时间（分）
        remark: ""	//备注
        /*
        deposit: "",
        vipMoney: "",
        money: "",
        superVipTimes: "",
        subMemberLimit: "",
        remark: ""
        */
      },
      listData: {
        items: [

        ]
      }
    }
  },
  onLoad(params) {
    this.roomId = params.roomId;
    this.mtCode = params.mtCode;
    this.roomState = params.roomState;
    if (this.mtCode=="undefined") {
      this.mtCode = "";
    }


  },
  onShow() {
    this.init()
  },
  components: {
    //MxDatePicker
    wPicker,
    Modal,
    MyTabs
  },
  computed: {
    dateList() {
      return util?.getFetureDay?.(5);
    },
  },
  methods: {
    ...util,
    init() {
      uni.showLoading({
        title: '加载中，请稍后'
      });
      let page = this;
      const date = new Date()
      const year = date.getFullYear()
      page.confirmInfo.startYear = year;
      this.getCurrentDate();
      this.getRoomDetail(this.roomId);
    },

    scanItem() {
      uni.scanCode({
        success:  (res) => {
          if (res.result) {
            this.groupVoucherNo = res.result;
            this.checkVoucher();
          } else {
            this.$Message.error("识别失败");
          }
        }
      });
    },

    checkVoucher() {
      if (this.groupVoucherNo) {
        this.$api.post('/mtconfig/getCodeInfo', {
          code: this.groupVoucherNo
        }).then((response) => {
          if (response.ret===1) {
            this.mtCode = this.groupVoucherNo
            this.couponState = true;
            this.getCouponInfo();
          } else {
            this.$Message.error(response.msg)
          }
        });
      } else {
        this.$Message.error("请输入团购码");
      }
    },

    // 选择模式
    onSelectMode(index) {
      this.curIndex = index;
    },

    // 显示优惠券
    handleShowCoupon () {
      if(!this.mtCode) {
        this.couponState = true;
      }
    },
    // 隐藏优惠券
    handleHiddenCoupon () {
      this.couponState = false;
    },
    getPrice(hour) {
      var item = this.timeIntervalDiscountJSON[hour];
      if(item) {
        if(item.discountType == 1 && item.discountValue < 10) {
          return (item.discountValue * this.roomConfig.price/100/10/2).toFixed(2)
        } else if(item.discountType == 2 && item.discountValue > 0) {
          return ((this.roomConfig.price/100 - item.discountValue)/2).toFixed(2)
        } else {
          return this.roomConfig.price/100/2
        }
      } else {
        return this.roomConfig.price/100/2
      }
    },
    selectCoupon (coupon) {
      //选择优惠券
      this.couponState = false;
      var totalAmt = this.roomConfig.price * this.confirmInfo.hour;
      if(coupon.voucherType == 1 || coupon.voucherType == 4 || coupon.voucherType == 5 || coupon.voucherType == 6) {
        this.confirmInfo.discountAmount = ((coupon.voucherValue/100) * this.roomConfig.price/100).toFixed(2);
      } else if(coupon.voucherType == 2) {
        this.confirmInfo.discountAmount = ((totalAmt - coupon.voucherValue/100/10 * totalAmt)/100).toFixed(2);
      } else if(coupon.voucherType == 3) {
        if(totalAmt < coupon.lessValue) {
          this.$Message.error("满" + coupon.lessValue/100 + "元可用！");
          return
        }
        this.confirmInfo.discountAmount = (coupon.voucherValue/100).toFixed(2);
      }
      if(this.confirmInfo.discountAmount > totalAmt/100) {
        this.confirmInfo.discountAmount = totalAmt/100;
      }
      this.confirmInfo.couponId = coupon.id;
      this.selectedCoupon = coupon
    },
    getCardAndVoucher() {
      this.$api.post('/user/voucher/getUserVoucher', {}).then((response) => {
        console.log("=======================函数3=====================================")
        if (response.ret===1) {
          let page = this;
          page.couponList = response.data;
          console.log("this.couponList===================")
          console.log(page.couponList)
          var quickSelectHourTimeLong = 2;
          var useGroupCoupon = false;
          page.couponList.forEach(function (coupon) {
            if(coupon.giveType == 6) {
              quickSelectHourTimeLong = coupon.voucherValue/100;
              useGroupCoupon = true;
              page.selectCoupon(coupon);
              page.hourList.forEach(function (item, index){
                    if(item.hour == quickSelectHourTimeLong) {
                      page.curHourIndex = index;
                    }
                  }
              );
            }
          });

          setTimeout(function () {
            uni.hideLoading();
            page.quickSelectHour(quickSelectHourTimeLong);
          }, 2000)
        }
      });
    },
    getCouponInfo() {
      if (this.mtCode && this.mtCode!='undefined') {
        this.$api.post('/mtconfig/getCodeInfo', {
          code: this.mtCode
        }).then((response) => {
          if (response.ret===1) {
            this.couponInfo = response.data;
          } else {
            this.$Message.error(response.msg)
          }
        });
      } else {
        //this.$Message.error("请输入团购码");
      }
    },
    scenePay() {
      let timestamp = Date.parse(new Date());
      timestamp = timestamp / 1000 + 10;
      let currentDate = this.timeToDate(timestamp);//当前时间
      let hour = this.confirmInfo.hour;
      this.toPay(currentDate, hour, hour * this.roomConfig.price/100);
    },
    onScenePickerChange(e) {
      //场景
      this.sceneConfirmDialog.hourIndex = e.detail.value;
      this.sceneConfirmDialog.hour = this.sceneConfirmDialog.hourArr[e.detail.value];
    },
    onTabChange(value) {
      console.log(value)
      this.tab.current = value
    },
    onSceneClose() {
      this.sceneConfirmDialog.show = false;
      this.$refs.typeTabs.setCurrent(0);
    },
    checkCurrentHour() {
      let startTime = parseInt((new Date()).valueOf()/1000);
      let currentDay = this.timeToDay(startTime);
      if (currentDay==this.selectOptions.startDate) {
        let date = new Date();
        let hour = date.getHours();
        let minutes = date.getMinutes();
        if(minutes < 15) {
          this.maxHour = hour * 60;
        } else if(minutes >= 15 && minutes < 45) {
          this.maxHour = hour * 60 + 30;
        } else if(minutes >= 45 && minutes <= 59) {
          this.maxHour = (hour + 1) * 60;
        }
      } else {
        this.maxHour = 0;
      }
    },
    onCancel() {

    },

    filterTime(time) {
      const date = new Date(time)
      const Y = date.getFullYear()
      const M = date.getMonth() + 1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1
      const D = date.getDate()
      return `${Y}-${M}-${D}`
    },

    toPay(startDate, hour, totalPrice) {
      let payTotalPrice = 0.00;
      if (totalPrice) {
        payTotalPrice = totalPrice;
      } else {
        payTotalPrice = this.confirmInfo.totalPrice;
      }

      if (payTotalPrice<=0) {
        this.$Message.error("订单金额不能为0");
        return false;
      }
      payTotalPrice = payTotalPrice - this.confirmInfo.discountAmount;
      wx.login({
        success: (res) => {
          if (res.code) {
            let wxCode = res.code;
            let payStartDate = '';
            let payHour = '';

            if (startDate) {
              payStartDate = startDate;
            } else {
              payStartDate = this.confirmInfo.startYear + "-" + this.confirmInfo.defaultHourStart.replace("月","-").replace("日","")+":00";
            }
            // TODO 确认规则
            payStartDate = this.confirmInfo.startYear + "-" + this.confirmInfo.defaultHourStart.replace("月","-").replace("日","")+":00";
            if (hour) {
              payHour = hour;
            } else {
              payHour = this.confirmInfo.hour;
            }

            //判断选择时间一段，要跟团购券一样
            //this.couponInfo.code;
            if (this.couponInfo.code) {
              let couponInfoHour = this.couponInfo.time;
              if (couponInfoHour!=payHour) {
                this.$Message.error("选择时长需要跟团购券时长一致");
                return false;
              }
            }

            //mtCode
            let payParams = {
              code: wxCode,
              roomId: this.roomId,
              startTime: payStartDate,// "2021-12-26 18:00:00",
              hours: payHour,
              mtCode: this.mtCode,
              couponId: this.confirmInfo.couponId
            }
            uni.showLoading({
              title: '预约中，请稍后'
            });
            this.$api.post('/roomOrder/roomOrder',
                payParams
            ).then((response) => {
              if (response.ret===1) {
                if (response.data===null || response.data===undefined || response.data==="ok" ) {
                  //会员支付成功
                  //this.$Message.success("支付成功");

                  this.goPage("/pages/tea/default/paySuccess");
                } else {
                  let json = "{"+response.data+"}";
                  json = json.replace(/'/g,'"');
                  json = JSON.parse(json);

                  uni.requestPayment({
                    provider: 'wxpay',
                    timeStamp: json.timeStamp,
                    nonceStr: json.nonceStr,
                    package: json.package,
                    signType: json.signType,
                    paySign: json.paySign,
                    success:  (res) => {

                      this.goPage("/pages/tea/default/paySuccess");

                    },
                    fail: function (err) {
                      console.log('fail:' + JSON.stringify(err));
                    }
                  });
                }


              } else {

                if ((response.data===null || response.data===undefined)&&response.msg=="会员费不足，请充值") {
                  //"msg":"会员费不足，请充值"
                  this.$Message.error(response.msg);

                  setTimeout(()=>{
                    this.goPage("/pages/user/info/vip");
                  },2000);
                } else if ((response.data===null || response.data===undefined)&&response.msg=="余额不足，请先充值") {
                  this.$Message.error(response.msg);
                  setTimeout(()=>{
                    this.goPage("/pages/user/info/vip?teaHouseId=" + this.room.teaHouseId);
                  },2000);
                } else {
                  this.$Message.error(response.msg)
                }
              }
              uni.hideLoading();
            });
          }
        }
      });
    },
    confirmOrder() {
      if (this.confirmInfo.hour==0) {
        this.$Message.info("请选择预约时间");
      } else if (this.confirmInfo.hour==1) {
        this.$Message.info("2小时起订6");
      } else {
        this.orderConfirmDailog.show = true;

        if(this.couponList.length > 0) {
          if(!this.mtCode) {
            this.couponState = true;
          }
        }
      }
    },
    confirmSelect() {
      let orderHourFloor = Math.floor(this.orderHour);
      let calItem = this.orderHour - orderHourFloor;
      let confirmHour = this.calHour("select");
      if (calItem==0.5) {
        this.$Message.info("预约小时必须为整数");
      } else if (confirmHour<=1){
        this.$Message.info("2小时起订88");
      } else {
        this.confirmInfo.startDate = this.selectOptions.startDate;// '2022-01-07',
        this.confirmInfo.hour = confirmHour;
        var totalPrice = 0;
        for(let i = 0; i<this.selectOptions.defaultHourList.length;i++) {
          var item = this.selectOptions.defaultHourList[i];
          if(item.selected) {
            var hourPrice = this.getPrice(item.hour)
            totalPrice = (totalPrice/1) + (hourPrice/1);
          }
        }
        this.confirmInfo.totalPrice = (this.confirmInfo.hour * (this.roomConfig.price / 100)).toFixed(2);
        this.confirmInfo.discountAmount = (this.confirmInfo.totalPrice - (totalPrice/1)).toFixed(2)
        this.showDetail = false;
      }
      this.confirmInfo.hour = confirmHour
      if(this.confirmInfo.defaultHourEnd) {
        this.confirmInfo.defaultHourEnd = this.thirtyMinAfter(this.confirmInfo.defaultHourEnd);
      }
      if(this.selectedCoupon) {
        this.selectCoupon(this.selectedCoupon);
      }
    },
    thirtyMinAfter(time) {
      if(!time) {
        return time;
      }
      var hour = parseInt(time.split(" ")[1].split(":")[0]);
      var min = time.split(" ")[1].split(":")[1];

      if(hour <=23 && min == '00') {
        return time.split(" ")[0] + " " + hour + ":" + "30"
      }
      if(hour <=23 && min == '30') {
        return time.split(" ")[0] + " " + (hour + 1) + ":" + "00"
      }
      return time;
    },
    onDateConfirm(day) {
      this.selectOptions.startDate = day.result;
      this.getCurrentDate(day.result);
    },
    selectCustomDay() {
      this.$refs.date.show();
    },
    quickSelectHour(timeLong, itemIndex) {
      this.curHourIndex = itemIndex;
      var index = timeLong * 2;
      var count = timeLong * 2;
      this.confirmInfo.defaultHourStart = '';
      this.selectOptions.defaultHourList.forEach(item => {
        item.selected = false;
        if(!item.pass && !item.disabled && index == count) {
          this.selectHour(item);
          index --;
        } else if(index < count && index > 1) {
          index --;
        } else if(index == 1) {
          this.selectHour(item);
          index --;
        }
      })
      this.confirmSelect();
      if(this.selectedCoupon) {
        this.selectCoupon(this.selectedCoupon);
      }
    },
    selectHour(defaultHour) {
      console.log("selectHour:===================================");
      console.log(defaultHour);
      let page = this;
      var startTimeFLag = false;
      if(!page.confirmInfo.defaultHourStart) {
        page.confirmInfo.defaultHourStart = defaultHour.day + " " + defaultHour.hour;
        startTimeFLag = true;
      } else {
        page.confirmInfo.defaultHourEnd = defaultHour.day + " " + defaultHour.hour;
      }

      if(!startTimeFLag && this.confirmInfo.defaultHourStart == defaultHour.day + " " + defaultHour.hour) {
        page.selectOptions.defaultHourList.forEach(function (item) {
          item.selected = false;
        });
        page.confirmInfo.defaultHourStart = '';
      }
      var startFlag = false;
      var endFlag = false;
      console.log("page.confirmInfo.defaultHourEnd:" + page.confirmInfo.defaultHourEnd)
      page.selectOptions.defaultHourList.forEach(function (item) {
        item.selected = false;
        var itemTime = item.day + " " + item.hour;
        if(page.confirmInfo.defaultHourStart == itemTime) {
          startFlag = true;
          item.selected = true;
          console.log("page.confirmInfo.itemTime:" + itemTime)
        }
        if(page.confirmInfo.defaultHourEnd == itemTime) {
          endFlag = true;
          item.selected = true;
        }

        if(!startTimeFLag && startFlag && !endFlag) {
          item.selected = true;
        }
      });
      this.orderHour = this.calHour();
    },
    calHour(dateType="select") {
      //计算预约了多少个小时
      var count = 1;
      var day = "";
      var dayCount = 0;
      this.selectOptions.defaultHourList.forEach(function (item) {
        if(item.selected && day == "") {
          day = item.day;
          dayCount ++;
        }

        if(item.selected && day != item.day) {
          console.log("day======================" + day)
          dayCount ++;
          day = item.day;
        }
        if(item.selected) {
          console.log("=========================================item.hour=============================================");
          console.log(item.hour);
          count ++;
        }
      });
      console.log("dayCount=" + dayCount)
      return count > 0 ? (count - 1)/2 : 0;
    },

    selectDay(defaultItem, index) {
      this.curDateIndex = index;
      let page = this;
      var day = defaultItem.day;

      // 查询预订情况
      this.$api.post('/roomOrder/bookingDetail',
          {
            roomId: this.roomId,
            day: defaultItem.year + "-" + day,
          }
      ).then((response) => {
        if (response.ret===1) {
          this.confirmInfo.startYear = defaultItem.year;

          for(let i = 0; i<this.selectOptions.defaultDayList.length;i++) {
            this.selectOptions.defaultDayList[i].selected = false;
          }
          this.selectOptions.startDate = defaultItem.day;
          defaultItem.selected = true;

          this.selectOptions.defaultHourStart = '';
          this.selectOptions.defaultHourEnd ='';
          this.checkCurrentHour();

          for(let i = 0; i<this.selectOptions.defaultHourList.length;i++) {
            this.selectOptions.defaultHourList[i].disabled = false;
            let hour = this.selectOptions.defaultHourList[i].hour;
            let itemDay = this.selectOptions.defaultHourList[i].day;
            let intHour = parseInt(hour.split(":")[0]) * 60 + parseInt(hour.split(":")[1])

            //过滤hour
            if(day != itemDay || intHour < this.maxHour) {
              this.selectOptions.defaultHourList[i].pass = true
            } else {
              this.selectOptions.defaultHourList[i].pass = false
            }
          }
          // this.orderHour = this.calHour();
          this.selectOptions.defaultHourList.forEach(function (item){
            response.data.forEach(function (bookingTime){
              page.bookedTimeJson[bookingTime] = false;
              day = day.replace("月","-").replace("日","");
              if(bookingTime == defaultItem.year + "-" + day.replace("月", "-").replace("日", "") + " " + item.hour) {
                item.disabled = true;
                page.bookedTimeJson[bookingTime] = true;
              }
            });
          });
          // this.orderHour = this.calHour();
        } else {
          this.$Message.error(response.msg)
        }
      });
    },
    getCurrentDate(startDate = '') {
      //获取当前日期，还有后两天日期数据
      let startTime = parseInt((new Date()).valueOf()/1000);
      if (startDate) {
        startTime = parseInt((new Date(startDate)).valueOf()/1000);
      }
      let startTimeNext01 = startTime+24*3600;
      let startTimeNext02 = startTime+24*3600*2;
      let startWeekLabel = this.getWeekDate(startTime);
      let startWeekLabel01 = this.getWeekDate(startTimeNext01);
      let startWeekLabel02 = this.getWeekDate(startTimeNext02);

      let startDateLabel = this.timeToDay(startTime);
      let startDateLabel01 = this.timeToDay(startTimeNext01);
      let startDateLabel02 = this.timeToDay(startTimeNext02);

      this.selectOptions.defaultDayList = [
        {
          year: this.timeToYear(startTime),
          day: startDateLabel,
          week: startWeekLabel,
          selected: false
        },
        {
          year: this.timeToYear(startTimeNext01),
          day: startDateLabel01,
          week:startWeekLabel01,
          selected: false
        },
        {
          year: this.timeToYear(startTimeNext02),
          day: startDateLabel02,
          week:startWeekLabel02,
          selected: false
        }
      ];
      this.initHours(startDateLabel, startDateLabel01, startDateLabel02);
    },

    initHours(day1, day2, day3) {
      this.generateHours(day1);
      this.selectDay(this.selectOptions.defaultDayList[0]);
      this.generateHours(day2);
      this.generateHours(day3);
    },

    generateHours(day) {
      var currMin = "00";
      var hour;
      for(var i = 0; i < 48; i ++ ) {
        hour = Math.trunc(i/2);
        /*if(hour == 24) {
          // 666666666666666666666
          hour = 0;
        }*/
        if(hour < 10) {
          hour = "0" + hour;
        }
        this.selectOptions.defaultHourList.push({
          day: day,
          hour: hour + ":" + currMin,
          disabled: false,
          pass: false,
          selected: false
        })
        if(currMin == "00") {
          currMin = "30";
        } else {
          currMin = "00";
        }
      }
    },

    timeToDay(timestamp) {
      var re = /^[0-9]+$/;
      if (!re.test(timestamp)) {
        return timestamp
      }
      var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '月';
      var D = date.getDate() < 10? '0'+date.getDate() + '日' : date.getDate() + '日';
      return M+D;
    },

    timeToDayYMD(timestamp) {
      var re = /^[0-9]+$/;
      if (!re.test(timestamp)) {
        return timestamp
      }
      var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      var D = date.getDate() < 10? '0'+date.getDate() : date.getDate();
      return M+D;
    },
    timeToYear(timestamp) {
      var re = /^[0-9]+$/;
      if (!re.test(timestamp)) {
        return timestamp
      }
      var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      return date.getFullYear();
    },
    DatePicker(type){//显示
      this.type = type;
      this.showPicker = true;
      this.value = this[type];
    },
    ed(e) {//选择
      this.showPicker = false;
      if(e) {
        this[this.type] = e.value;
      }
    },
    getRoomDetail(id) {
      this.$api.post('/room/getById',
          {
            roomId: id
          }
      ).then((response) => {
        console.log("=======================函数1=====================================")
        if (response.ret===1) {
          this.room = response.data
        } else {
          this.$Message.error(response.msg)
        }
        this.getRoomConfig(this.roomId);
      });
    },
    getRoomConfig(id) {
      let page = this
      this.$api.post('/roomConfig/getById',
          {
            roomId: id
          }
      ).then((response) => {
        console.log("=======================函数2=====================================")
        if (response.ret===1) {
          if (response.data) {
            this.roomConfig = response.data
            if(this.roomConfig.timeIntervalDiscount) {
              var timeIntervalDiscount = JSON.parse(this.roomConfig.timeIntervalDiscount);
              timeIntervalDiscount.forEach(function (item) {
                page.timeIntervalDiscountJSON[item.time] = item;
              })
            }
          } else {
            this.roomConfig.price = 0;
          }

        } else {
          this.$Message.error(response.msg)
        }
        this.getCardAndVoucher();
      });
    }
  }
}
</script>

<style lang="scss">
.schedule-container{
  background-color: #F5F4F8;
  color:#000000;
  padding-bottom:150upx;
  font-size:32upx;
  overflow: hidden;

  .scene-confirm-form {
    padding: 20upx;

    .form-item {
      margin-top:20upx;
      display: flex;
      .form-title{
        margin-right:20upx;
      }
      .form-value{
        flex:1;
      }
    }

  }



  .background-fix{
    background-color: black;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    z-index: 10;
    position: fixed;
    top: 0;
  }

  .quick-select {
    display: flex;
    text-align: center;
    margin: 0 auto 20rpx auto;
  }

  .quick-select-btn {
    width: 33%;
    border: 1px solid #80cbc4;
    margin: 0 20rpx;
    padding: 10rpx 0;
    border-radius: 10rpx;
  }

  .appointment-select{
    /*display: none;*/
    position: fixed;
    bottom: 0;
    z-index: 1000;
    height:1080upx;
    width:750upx;
    background-color: #F0F0EE;
    //border-top-left-radius: 20upx;
    //border-top-right-radius: 20upx;
    .notice-tip{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top:20upx;
      color:#1D2C6D;
      font-weight: 500;
      .notice-image{
        width:50upx;
        height:55upx;
        margin-right:10upx;
      }
    }

    .date-select{
      display: flex;
      margin:20upx;
      font-size:28upx;
      border-radius:20upx;
      background-color: #80cbc4;
      /*

      */
      .date-select-item{
        flex:1;
        height:120upx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        /*
        color:white;
        color:#999;*/
        &.current{
          background-color: #1D2C6D;
          border-radius:20upx;
          color:white;
        }

        .month{}
        .week{}
        .cal-image{
          width: 30upx;
          height: 30upx;
        }
      }
    }
    .hours{
      /*
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      */
      margin-left:20upx;
      font-size:28upx;
      overflow-y: scroll;

      height: 550upx;

      .hour{
        float:left;
        text-align: center;
        padding:20upx 18upx;
        margin-right:20upx;
        margin-bottom:20upx;
        border-radius: 10upx;
        background-color: #80cbc4;
        height: 60upx;
        width: 25%;
        &.current{
          background-color: #1D2C6D;
          color:white;
        }
      }
    }
    .select-buttons{
      position: fixed;
      bottom: 0;
      display: flex;
      justify-content: center;

      align-items: center;
      height:120upx;
      background-color: white;
      border-top: 1upx solid #eee;
      width: 100%;
      .close-button{
        width:250upx;
        border-radius: 30upx;
        background-color: #80cbc4;
        padding:20upx;
        text-align: center;
        margin-left:10upx;
      }
      .confirm-button{
        width:250upx;
        border-radius: 30upx;
        background-color: #1D2C6D;
        color:white;
        padding:20upx;
        margin-left: 30upx;
        text-align: center;
      }
    }
  }

  .date-tip{
    background-color: #FFF4E4;
    width: 550upx;
    margin:0 auto;
    padding:10upx;
    font-size: 28upx;
    text-align: center;
    margin-bottom: 10upx;
    margin-top: 10upx;
    color: #1D2C6D;
    position: relative;
    .triangle-down{
      width: 0;
      height: 0;
      border-left: 10upx solid transparent;
      border-right: 10upx solid transparent;
      border-top: 20upx solid #1D2C6D;
      position: absolute;
      right: 20upx;
      top:20upx;
    }
  }
  .select-date{
    .head{
      display: flex;
      justify-content: center;
      align-items: center;
      .info{
        font-weight: bold;
        margin-left: 10upx;
      }
    }
  }
  .buttons{
    position: fixed;
    bottom: 0;
    height:100upx;
    background-color: white;
    width:100%;
    display: flex;
    .price-info{
      flex: 1;
      .price{
        font-size:32upx;
        margin-left:30upx;
        margin-top:10upx;
      }
      .total-hours{
        font-size:28upx;
        margin-left:30upx;
      }
    }
    .button{
      width: 180upx;
      text-align: center;
      background-color: #1D2C6D;
      color:white;
      line-height: 100upx;

    }
  }
  .isOkRoom{
    color:green;
  }
  .submit-button{
    font-size:30upx;
    /*margin:0 auto;*/
    background-color:#1D2C6D;
    color:white;
    width:300upx;
    height:60upx;
    text-align: center;
    line-height: 60upx;
    margin-top:20upx;
  }
  .tea-item{
    width: 94%;
    background-color: white;
    background-color: #F5F4F8;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 20upx;
    .image{

    }
    .map-point{
      width:120upx;
      height:120upx;
      /*background-color: white;*/
      margin-right:20upx;
    }
    .tea-house-info{
      width:100%;
      height:120upx;
      margin-top:-160upx;
      /*
      background-color: black;
      opacity: 0.5;
      */
      background-color: rgba(0,0,0,0.5);
      padding:20upx;
      color:white;
      font-size:32upx;
      display: flex;
      .base-info{
        flex:1;
      }
      .title{
        font-weight: bold;
      }
      .address{

      }
    }
    .map-item-info{
      display: flex;
      flex-direction: column;
      .map-info{
        text-align: center;
        font-size:24upx;
        /*margin:0 auto;*/
        background-color:#1D2C6D;
        color:white;

        height:45upx;
        text-align: center;
        line-height: 45upx;
      }
    }
    .content{
      flex: 1;
      .title{
        color:#1D2C6D;
        font-size:32upx;
      }
    }
  }
  /*
  .info-item{
    background-color: white;
    display: flex;
    padding: 20upx;
    font-size:28upx;
    border-bottom: 1upx solid #eee;
    .icon{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .value{
      margin-left:20upx;
    }
  }*/
  .room-select{
    /*
    margin-left:38upx;
    margin-right:38upx;
    */
    margin-top:40upx;
    .head{
      font-size:32upx;
      text-indent:20upx;
    }
    .items{
      background-color: white;
      .item{
        display: flex;
        padding: 20upx;
        margin-top:20upx;
        .icon{
          width:160upx;
          height:160upx;
          margin-right:20upx;

        }
        .info{
          flex:1;
          margin-left:20upx;
          font-size:32upx;

          .name{
            font-size:32upx;
            color:#4B4B4B;
            font-weight: bold;
          }
          .number{
            font-size:28upx;
            color:#767676;
            margin-top:10upx;
          }
          .desc{
            font-size:28upx;
            color:#767676;
          }
        }

        .select-btn{
          display: none;
          background-color: #1D2C6D;
          color:white;
          width:128upx;
          height:69upx;
          line-height: 69upx;
          font-size:28upx;
          text-align: center;
        }
        .no-select-btn{
          background-color: #eee;
        }
      }
    }
  }

  .coupon {
    width: 100%;
    height: 100%;
  }
  .coupon-box {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;
    background-color: rgba(0, 0, 0, 0.4);
    transition: .3s;
    z-index: 999;
  }
  // 进入分享动画
  .coupon-show {
    transition: all 0.3s ease;
    transform: translateY(0%) !important;
  }
  // 离开分享动画
  .coupon-item {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    transition: all 0.3s ease;
    transform: translateY(100%);
    z-index: 1999;
    .coupon-to {
      width: 100%;
      height: 3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      &::after {
        content: '';
        width: 240rpx;
        height: 0rpx;
        border-top: 1px solid #E4E7ED;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        margin-left: 30rpx;
      }
      &::before {
        content: '';
        width: 240rpx;
        height: 0rpx;
        border-top: 1px solid #E4E7ED;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        margin-right: 30rpx;
      }
    }
    .content {
      width: 100%;
      height: auto;
      flex-wrap: wrap;
      .block{
        height: 180rpx;
        display: flex;
        border-bottom: gainsboro 1px dashed;
        border-top: gainsboro 1px dashed;
        image {
          width: 80rpx;
          height: 80rpx;
          justify-content: center;
        }
        .coupon-desc {
          padding: 20rpx 30rpx;
          justify-content: center;
          margin-top: 16rpx;
          font-size: 28rpx;
          color: #606266;

          .coupon-name {
            display: inline-list-item;
            font-size: 32rpx;
            font-weight: bold;
          }

          .coupon-times{
            color: #1D2C6D;
            margin-top: 10rpx;
          }

          .coupon-used{
            color: orange;
            margin-left: 20rpx;
            margin-top: 10rpx;
          }

          .coupon-validity {
            display: inline-list-item;
            color: lightgrey;
            margin-top: 10rpx;
          }
        }
        .coupon-icon {
          margin-left: 36rpx;
          width: 160rpx;
          height: auto;
        }
      }
    }
    .cancel {
      width: 100%;
      height: 3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 1rpx solid #E4E7ED;
    }
  }
  .header-bg{
    height: 160upx;
    background: #1D2C6D
  }

  .header {
    width: 95%;
    padding: 20rpx;
    background: #fff;
    //padding: 12px;
    box-sizing: border-box;
    border-radius: 8px;
    margin: -150upx auto 0 auto;
    box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.1);
    .notice-wrap {
      display: flex;
      justify-content: space-between;
      height: 300rpx;
      .left {
        width: 220rpx;

        overflow: hidden;
        border-radius: 8rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex: 1;
        padding-left: 20rpx;
        .title-wrap,
        .notice-desc-wrap {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 20rpx;
          .title {
            font-weight: 500;
            font-size: 13px;
          }
          .status {
            border-radius: 3px;
            border: 1px solid #f00;
            font-size: 11px;
            padding: 2px 4px;
            color: #f00;
          }
          .use-desc {
            color: #1D2C6D;
            font-size: 12px;
          }
        }
        .detail-desc {
          font-size: 11px;
          line-height: 1.7;
        }
      }
    }
  }
  .body {
    width: 95%;
    padding: 20rpx;
    .schedule-mode-wrap {
      border-radius: 8px;
      padding-bottom: 10px;
      overflow: hidden;
      .category {
        display: flex;
        background: #fff;
        border-bottom: 1px solid #1D2C6D;
        .item {
          flex: 1;
          text-align: center;
          font-size: 16px;
          height: 32px;
          line-height: 32px;
          transition: all ease-in 0.3s;
          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
          &.actived {
            color: #fff;
            background: #1D2C6D;
          }
        }
      }
      .category-detail {
        padding: 16px 0 6px;
        border: 1px solid #1D2C6D;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top-color: transparent;
        position: relative;
        background: #fff;
        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
        .select-warp {
          padding: 0 12px;
        }
        .label {
          color: #333;
          font-size: 13px;
          font-weight: 500;
        }
      }
      .date-picker {
        display: flex;
        justify-content: space-between;
        .date-item {
          padding: 4px 12px;
          font-size: 12px;
          text-align: center;
          transition: all ease-in 0.2s;
          border-radius: 3px;
          border: 1px solid;
          border-color: transparent;

          &.actived {
            color: #1D2C6D;
            border-color: #1D2C6D;
            background: #e8f7e8;
          }
        }
      }
      .hour-picker {
        display: flex;
        align-items: center;
        padding-top: 16px;
        .hour-wrap {
          flex: 1;
          display: flex;
          justify-content: space-around;
          padding-left: 10px;
          font-weight: bold;
        }
        .hour-item {
          transition: all ease-in 0.2s;
          font-size: 12px;
          border-radius: 3px;
          padding: 4px 8px;
          border: 1px solid;
          border-color: #ddd;
          &.actived {
            background: #1D2C6D;
            color: #FFFFFF;
            border-color: #1D2C6D;
          }
        }
      }
      .time-picker {
        display: flex;
        align-items: center;
        padding: 16px 0;
        .time-wrap {
          flex: 1;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .time-item {
            flex: 2;
            text-align: center;
            padding: 4px 0;
            border: 1px solid;
            border-color: #ddd;
            border-radius: 20px;
            font-size: 28rpx;
          }
        }
      }
      .confirm-tip {
        font-size: 12px;
        font-weight: 300;
        padding: 6px 6px 0;
        border-top: 1px solid #b7d8b9;
        line-height: 1.5;
      }
    }
    .spare-time-wrap {
      border-radius: 8px;
      overflow: hidden;
      .spare-time {
        background: #fff;
        padding: 0 12px;
      }
      .block {
        width: 12px;
        height: 12px;
        background: #1D2C6D;
        border-radius: 2px;
        margin-right: 4px;
        border: 1px solid #ddd;
      }
      .top {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        padding: 18px 8px 0;
      }
      .block-item {
        display: flex;
        align-items: center;
      }
      .middle {
        padding-top: 12px;
        .block {
          width: 10px;
          height: 10px;
          margin-right: 0;
          background: #fff;
        }
        .spare-time-map {
          padding-bottom: 12px;
        }
        .date {
          color: #333;
          font-size: 11px;
          font-weight: 300;
          padding-bottom: 2px;
        }
        .map {
          flex: 1;
          text-align: center;
        }
        .map-wrap {
          display: flex;
          justify-content: space-between;
        }
        .number {
          font-size: 9px;
          font-weight: 400;
          color: #000;
        }
      }
    }

    .order-detail-wrap {
      border-radius: 8px;
      overflow: hidden;
      margin-top: 20upx;
      .spare-time {
        background: #fff;
        padding: 0 12px;
      }
      .title-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        line-height: 48rpx;
        border-bottom: 1px solid #F0F0EE;
        .title {
          font-weight: 500;
          font-size: 14px;
        }
        .total-price {
          border-radius: 3px;
          font-size: 14px;
          padding: 2px 4px;
          color: #f00;
          font-weight: bold;
        }
        .use-desc {
          color: #1D2C6D;
          font-size: 12px;
        }
      }

      .order-info-field {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16rpx 0;
        line-height: 40rpx;
        .title {
          font-size: 13px;
        }
        .info {
          border-radius: 3px;
          font-size: 13px;
          padding: 2px 4px;
        }
      }
    }
  }
}

</style>
